<!DOCTYPE html>
<html>
	<head>
	    <meta charset="utf-8">
	    <meta name="viewport" content="initial-scale=1, user-scalable=0, minimal-ui" charset="UTF-8">
	    <title></title>
	    <link rel="stylesheet" href="css/index.css" />
	    <link rel="stylesheet" href="css/swiper.css" />
	    <link rel="stylesheet" href="css/mint.css">
	</head>
	    <script src="js/serverUrl.js"></script>
	    <script src="js/vue.js"></script>
	    <script src="js/mint.js"></script>
	    <script src="js/moment.js"></script>
		<style>
			.certificateTitle{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 2vw;
				background-color: #fff;
				padding-right: 3vw;
			}
			.certificateLabel{
				font-size: 4.5vw;
			}
			.arrow{
				width: 2vw;
				height: 4vw;
			}
			.certificateItem{
				display: flex;
				flex-direction: column;
				background-color: #fff;
				border-top: 1px solid #f0f0f0;
				padding-left: 3vw;
			}
			.certificateItemLabel{
				padding-top: 1vw;
				font-size: 4vw;
				
			}
        .certificateContainer + .certificateContainer{
            margin-top:3vw;
        }
		</style>
	<body>
		<div id="app">
			<div v-for="certificate in certificateList" class="certificateContainer">
				<div class="certificateTitle">
                    <div class="certificateLabel">{{certificate.typeName}}</div>
					<img class="arrow" src="img/right_arrow.png" />
				</div>
				<div class="certificateItem">
                    <div class="certificateItemLabel">证书名称:{{certificate.certificateName}}</div>
                    <div class="certificateItemLabel">证书编号:{{certificate.certificateCode}} </div>
					<div class="gally">
						<div class="photoConatiner"  v-for="(image,index) in certificate.imageList">
						    <img class="image"
						        style="margin-top: 2vw;"
						        :src="image" />
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
			var app = new Vue({
				 el: '#app',
				 data:{
                     certificateList:[]
				 },
				 created() {
					window.getCertificateList = this.getCertificateList
				 },
				 methods:{
					 getCertificateList(certificateList){
                         for(let i =0;i<certificateList.length;i++){
                             let item = certificateList[i]
                             item.imageList = JSON.parse(item.certificateImage)
                             for(let j =0;j<item.imageList.length;j++){
                                 item.imageList[j] = serverUrl +  item.imageList[j]
                             }
                         }
						 this.certificateList = certificateList
					 }
				 }
			})
	</script>
</html>
